<template>
  <div class="student-dashboard">
    <!-- 欢迎信息 -->
    <div class="mb-6">
      <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-2">
        欢迎回来，{{ userInfo.name || '同学' }}
      </h1>
      <p class="text-gray-600">今天是 {{ currentDate }}，本周你有 {{ upcomingCourses.length }} 门课程</p>
    </div>

    <!-- 数据卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      <el-card class="shadow-sm hover:shadow-md transition-shadow">
        <template #header>
          <div class="flex justify-between items-center">
            <span>本周课程</span>
            <el-icon class="text-primary">
              <Calendar />
            </el-icon>
          </div>
        </template>
        <div class="text-center py-4">
          <div class="text-3xl font-bold text-gray-800">{{ upcomingCourses.length }}</div>
          <div class="text-sm text-gray-500 mt-1">门课程</div>
        </div>
      </el-card>

      <el-card class="shadow-sm hover:shadow-md transition-shadow">
        <template #header>
          <div class="flex justify-between items-center">
            <span>待处理保修</span>
            <el-icon class="text-warning">
              <Tools />
            </el-icon>
          </div>
        </template>
        <div class="text-center py-4">
          <div class="text-3xl font-bold text-gray-800">{{ pendingRepairs }}</div>
          <div class="text-sm text-gray-500 mt-1">个申请</div>
        </div>
      </el-card>

      <el-card class="shadow-sm hover:shadow-md transition-shadow">
        <template #header>
          <div class="flex justify-between items-center">
            <span>未读通知</span>
            <el-icon class="text-info">
              <MegaphoneFilled />
            </el-icon>
          </div>
        </template>
        <div class="text-center py-4">
          <div class="text-3xl font-bold text-gray-800">{{ unreadNotices }}</div>
          <div class="text-sm text-gray-500 mt-1">条通知</div>
        </div>
      </el-card>

      <el-card class="shadow-sm hover:shadow-md transition-shadow">
        <template #header>
          <div class="flex justify-between items-center">
            <span>班级积分</span>
            <el-icon class="text-success">
              <StarFilled />
            </el-icon>
          </div>
        </template>
        <div class="text-center py-4">
          <div class="text-3xl font-bold text-gray-800">{{ classPoints }}</div>
          <div class="text-sm text-gray-500 mt-1">分</div>
        </div>
      </el-card>
    </div>

    <!-- 课程表和通知 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 本周课程 -->
      <div class="lg:col-span-2">
        <el-card class="shadow-sm h-full">
          <template #header>
            <div class="flex justify-between items-center">
              <span>本周课程</span>
              <el-button type="text" size="small">查看全部</el-button>
            </div>
          </template>

          <div class="overflow-x-auto">
            <el-table :data="upcomingCourses" stripe style="width: 100%">
              <el-table-column prop="day" label="星期" width="80"></el-table-column>
              <el-table-column prop="time" label="时间" width="120"></el-table-column>
              <el-table-column prop="course" label="课程名称"></el-table-column>
              <el-table-column prop="teacher" label="授课教师" width="100"></el-table-column>
              <el-table-column prop="location" label="教室" width="100"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>

      <!-- 最新通知 -->
      <div>
    <el-card class="shadow-sm h-full">
      <template #header>
        <div class="flex justify-between items-center">
          <span>最新宿舍通知</span>
          <el-button type="text" size="small" @click="goToNoticeList">查看全部</el-button>
        </div>
      </template>

          <el-list :data="latestNotices" v-if="!isLoading">
        <el-list-item v-for="(item, index) in latestNotices" :key="index">
          <div class="flex items-start">
            <el-badge :value="item.isNew ? '新' : ''" type="primary" class="mr-2 mt-1" v-if="item.isNew"></el-badge>
            <div>
              <div class="font-medium text-gray-800">{{ item.title }}</div>
              <div class="text-sm text-gray-500 mt-1">{{ formatDate(item.publishTime) }}</div>
            </div>
          </div>
        </el-list-item>
        <el-list-item v-if="latestNotices.length === 0" class="text-center">
          暂无最新通知
        </el-list-item>
          </el-list>

          <div v-if="isLoading" class="text-center p-4">
        <el-spinner />
        <div class="mt-2">加载中...</div>
      </div>
        </el-card>
      </div>



    </div>

    <!-- 保修记录 -->
    <!-- <div class="mt-6">
      <el-card class="shadow-sm">
  <template #header>
    <div class="flex justify-between items-center">
      <span>最近报修记录</span>
      <el-button type="primary" size="small" @click="goToRepair">
        <el-icon>
          <Plus />
        </el-icon>
        上报保修
      </el-button>
    </div>
  </template>

  <el-table :data="repairHistory" stripe style="width: 100%">
    <el-table-column prop="id" label="保修单号" width="120"></el-table-column>
    <el-table-column prop="type" label="保修类型" width="100"></el-table-column>
    <el-table-column prop="status" label="状态" width="100">
      <template #default="{ row = {} }"> 
        <el-tag :type="row.statusType || 'info'">{{ row.status || '无状态' }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="提交时间" width="140"></el-table-column>
 
<el-table-column label="操作" width="100">
  <template v-slot:default="scope">
    <el-button 
      v-if="isValidRow(scope.row)" 
      @click="handleView(scope.row.id)"
    >
      查看详情
    </el-button>
  </template>
</el-table-column>
  </el-table>

  <div v-if="repairHistory.length === 0" class="p-4 text-center text-gray-500">
    暂无保修记录，请点击上方按钮上报保修
  </div>
</el-card>
    </div> -->
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Calendar, Tools, MegaphoneFilled, StarFilled } from '@element-plus/icons-vue';
import { getLatestNotices } from '@/api/student';
import { useUserStore } from '@/store/user';

// const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
// 从 sessionStorage 获取用户信息
const userInfo = computed(() => userStore.userInfo || {});



// 当前日期
const currentDate = computed(() => {
  const now = new Date();
  const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
  return now.toLocaleDateString('zh-CN', options);
});

// 模拟数据
const upcomingCourses = ref([
  { day: '周一', time: '08:30-10:10', course: '高等数学', teacher: '李教授', location: '3-201' },
  { day: '周一', time: '10:30-12:10', course: '大学物理', teacher: '王老师', location: '2-302' },
  { day: '周二', time: '08:30-10:10', course: '英语', teacher: '张老师', location: '1-405' },
  { day: '周三', time: '14:00-15:40', course: '计算机基础', teacher: '刘老师', location: '实验楼B-203' },
  { day: '周四', time: '08:30-10:10', course: '数据结构', teacher: '陈老师', location: '3-201' },
  { day: '周五', time: '14:00-15:40', course: '体育', teacher: '赵老师', location: '体育馆' }
]);

// 新增：通知相关状态
const latestNotices = ref([]);
const isLoading = ref(false);
const PAGE_SIZE = 5; // 限制获取5条数据

// 日期格式化函数
const formatDate = (dateStr) => {
  return new Date(dateStr).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  });
};

// 获取最新通知
const fetchLatestNotices = async () => {
  isLoading.value = true;
  try {
    const response = await getLatestNotices({
      studentId: userInfo.value.studentId, 
      pageSize: PAGE_SIZE
    });
    if (response.code === 0) {
      latestNotices.value = response.data;
    }
  } catch (error) {
    console.error('获取通知失败:', error);
  } finally {
    isLoading.value = false;
  }
};

// 跳转至全部通知页面
const goToNoticeList = () => {
  // router.push({ name: '/student/notices', query: { studentId: userInfo.value.studentId } });
  router.push('/student/notices');
};

// 生命周期钩子
onMounted(() => {
  fetchLatestNotices();
});

const repairHistory = ref([
  { id: 'REP20230528001', type: '水管维修', status: '已完成', statusType: 'success', date: '2023-05-28' },
  { id: 'REP20230525002', type: '灯具更换', status: '处理中', statusType: 'warning', date: '2023-05-25' },
  { id: 'REP20230520003', type: '门锁维修', status: '已完成', statusType: 'success', date: '2023-05-20' },
  { id: 'REP20230518004', type: '空调故障', status: '已拒绝', statusType: 'danger', date: '2023-05-18' }
]);

// 统计数据
const pendingRepairs = computed(() => {
  return repairHistory.value.filter(item => item.status === '处理中').length;
});

const unreadNotices = computed(() => {
  return latestNotices.value.filter(item => item.isNew).length;
});

const classPoints = ref(98);








// 模拟异步数据加载（示例）
setTimeout(() => {
  repairHistory.value = [
    { id: 'REP20231001', type: '电路维修', status: '处理中', statusType: 'warning', date: '2023-10-01' },
    // 其他数据...
  ];
}, 1000);
// 跳转到保修页面
// const goToRepair = () => {
//   router.push('/student/repair');
// };

// 生命周期钩子
onMounted(() => {
  // 页面加载时的初始化逻辑
});
</script>

<style scoped>
.student-dashboard {
  font-family: 'Inter', system-ui, sans-serif;
}

.el-card {
  border-radius: 8px;
}

.el-table__header th {
  background-color: #f5f7fa;
  color: #606266;
}

.el-list-item {
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

.el-list-item:last-child {
  border-bottom: none;
}
</style>